import React, { useState, useRef, useEffect } from 'react';
import './ccss/Carousel.css'
import fei from '../assets/image/非机动车未带头盔识别系统_nor.png'
import fei1 from '../assets/image/非机动车未带头盔识别系统_hov.png'
import zhong from '../assets/image/重点车辆监管系统_nor.png'
import zhong1 from '../assets/image/重点车辆监管系统_hov.png'
import jiao from '../assets/image/交通态势监控系统_nor.png'
import jiao1 from '../assets/image/交通态势监控系统_hov.png'
import ke from '../assets/image/可视化作战平台_nor.png'
import ke1 from '../assets/image/可视化作战平台_hov.png'
import an from '../assets/image/交通安全画像系统_nor.png'
import an1 from '../assets/image/交通安全画像系统_hov.png'
import ding from '../assets/image/交通事故智能定位分析系统_nor.png'
import ding1 from '../assets/image/交通事故智能定位分析系统_hov.png'
interface CarouselItem {
  id: number;
  isBlue: boolean;
  blueImg: string;
  yellowImg: string;
  text: string;
}

const Carousel: React.FC = () => {
  const [carousel, setCarousel] = useState<Array<CarouselItem>>([
    {
      id: 1,
      blueImg: fei,
      yellowImg: fei1,
      text: '未带头盔啊识别系统',
      isBlue: true
    },
    {
        id: 2,
        blueImg: zhong,
        yellowImg:zhong1,
        text: '重点车辆监管系统',
        isBlue: true
    },
    {
        id: 3,
        blueImg: jiao,
        yellowImg: jiao1,
        text: '交通态势监控系统',
        isBlue: true
    },
    {
        id: 4,
        blueImg: ke,
        yellowImg: ke1,
        text: '可视化作战平台',
        isBlue: true
    },
    {
        id: 5,
        blueImg: an,
        yellowImg: an1,
        text: '交通安全画像系统',
        isBlue: true
    },
    {
        id: 6,
        blueImg: ding,
        yellowImg: ding1,
        text: 'GPS定位系统',
        isBlue: true
    }
   
  ]);

  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current) {
      const children = containerRef.current.children;
      for (let a = 0; a < children.length; a++) {
        children[a].style.animationDelay = `${-5 - a * 3.3}s, -${a * 3.3}s, -${a * 3.3}s`;
      }
    }
  }, []);

  const change = (id: number) => {
    setCarousel(prevCarousel => {
      return prevCarousel.map(item => {
        if (item.id === id) {
          return { ...item, isBlue: !item.isBlue };
        }
        return item;
      });
    });

    if (containerRef.current) {
      const children = containerRef.current.children;
      for (let a = 0; a < children.length; a++) {
        children[a].style.animationPlayState = carousel.find(item => item.id === id)?.isBlue ? 'running' : 'paused';
      }
    }
  };

  const handleClick = (text: string) => {
    alert(text);
  };

  return (
    <div className="carbig" ref={containerRef}>
      {carousel.map((item) => (
        <div key={item.id} className="img"
             onMouseEnter={() => change(item.id)}
             onMouseLeave={() => change(item.id)}
             onClick={() => handleClick(item.text)}>
          <img style={{ display: item.isBlue ? 'block' : 'none' }} src={item.blueImg} alt="" />
          <img style={{ display: item.isBlue ? 'none' : 'block' }} src={item.yellowImg} alt="" />
          <p>{item.text}</p>
        </div>
      ))}
    </div>
  );
};

export default Carousel;
